import React, { useState, useContext, useEffect } from "react";
import { Link, useHistory, useLocation } from "react-router-dom";
import { Form, Input, Row, Col, Checkbox, message, Button, Space, Statistic } from 'antd';
import { FormInstance } from 'antd/lib/form';
import { MessageOutlined, PhoneOutlined } from '@ant-design/icons';
import { _getCode, phoneNumberTest } from '@/service/service';

import { _saleRegister } from "./service";

const { Countdown } = Statistic;

const Invite: React.FC = () => {

    const formRef = React.createRef<FormInstance>();
    const history = useHistory();
    const location = useLocation();

    const [codeBtnState, setCodeBtnState] = useState(true),
        [phone, setPhone] = useState<string>(''),
        [deadline, setDeadline] = useState<number>();

    const getCode = async () => {

        !!phoneNumberTest(phone) && await _getCode({
            phone: phone,
            template_id: 'C1'
        }).then((res) => {
            if (res.status === 200) {
                setCodeBtnState(t => !t);
                setDeadline(Date.now() + 60 * 1000);
                res.data.code === 200 && message.success('验证码已发送！', 1.5);
            }
        })
    }

    const onFinish = async (values) => {
        const token = location.search.substring(1).split('token=')[1]
        await _saleRegister({
            ...values,
            sale_token: token,
        }).then((dataRes)=>{
            dataRes.data.code === 200 && message.success(dataRes.data.msg,1)
        })
    }

    return (
        <div className="main-withbackground">
            <div className="wrapper">
                <div className="form-main" style={{ marginTop: '20px' }}>
                    <div className="form-main-title">登录</div>
                    <Form
                        ref={formRef}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="phone"
                            validateFirst="parallel"
                            validateTrigger="onBlur"
                            rules={[
                                { required: true, message: '请输入手机号码！' },
                                () => ({
                                    validator(_, value) {
                                        if ((/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/).test(value)) {
                                            setPhone(value)
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('请输入正确的手机号！'));
                                    },
                                }),
                            ]}
                        >
                            <Input
                                prefix={<PhoneOutlined rotate={180} style={{ fontSize: '18px', color: '#d4d4d4' }}
                                    className="site-form-item-icon" />}
                                placeholder="手机号码"
                            />
                        </Form.Item>
                        <Form.Item className="form-item">
                            <Row gutter={8}>
                                <Col span={17}>
                                    <Form.Item
                                        name="code"
                                        noStyle
                                        rules={[{ required: true, message: '请输入验证码!' }]}>
                                        <Input
                                            prefix={<MessageOutlined style={{ fontSize: '18px', color: '#d4d4d4' }}
                                             />}
                                            autoComplete="off"
                                            placeholder="短信验证码"
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={7}>
                                    <Button onClick={getCode} disabled={!codeBtnState} >
                                        {
                                            !codeBtnState ?
                                                <Space size="small">
                                                    <span>已发送</span>
                                                    <Countdown onFinish={() => setCodeBtnState(t => !t)} style={{ visibility: codeBtnState ? 'hidden' : 'visible', lineHeight: '0', }} valueStyle={{ fontSize: '15px', color: '#d0d0d0', letterSpacing: '0' }} value={deadline} format="s" />
                                                </Space> : '获取验证码'
                                        }
                                    </Button>
                                </Col>
                            </Row>
                        </Form.Item>
                        <Form.Item >
                            <Button block type="primary" htmlType="submit" shape="round" size="large" >立即登录</Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    )
}
export default Invite;